.header {
  padding: 0 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  box-shadow: 0 0 10px var(--theme-timeline-bg);
  section {
    display: flex;
    align-items: center;
  }
  .left {
    position: relative;
    z-index: 300;
    a {
      margin-right: 20px;
    }
  }
  .right {
    position: relative;
    z-index: 300;
    button {
      margin-right: 20px;
    }

    .git {
      margin-right: 20px;
      color: var(--theme-text);
      display: flex;
      align-items: center;
    }
  }

  // .center {
  //   .title {
  //     margin-left: 150px;
  //     text-align: center;
  //     width: 300px;
  //     background: transparent;
  //     border: none;
  //     font-size: 14px;
  //     color: var(--theme-text);
  //   }
  // }

  .title {
    background: transparent;
    border: none;
    font-size: 14px;
    color: var(--theme-text);
    padding: 4px 6px;
    border-radius: 100px;
    width: 160px;
    transition: 0.5s;
    &:hover {
      background: var(--theme-input);
    }
  }

  .openVipButton {
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    &:hover {
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .login {
    background: linear-gradient(45deg, #00e9fa 0%, #8b20fb 51%, #bb00fa 100%);
    &:hover {
      background: linear-gradient(60deg, #00e9fa 0%, #8b20fb 51%, #bb00fa 100%) !important;
    }
  }
}

.loadingAnimate {
  transform-origin: center;
  position: relative;
  animation: rotateLoop 1s linear 0s infinite;
}

@keyframes rotateLoop {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
